<template>
  <!-- fubb -->
  <view :style="{ height: props.height + 'rpx' }" class="su-time-view">
    <picker-view
      v-if="show"
      indicator-style="height:50px" 
      :immediate-change="props.immediateChange"
      :value="colIndex"
      :style="{ height: props.height + 'rpx' }"
      @change="colchange"
    >
      <!-- year -->
      <picker-view-column v-if="showCol.year">
        <view v-for="(item, index) in _col.year" :key="index" class="itemcel" :class="[colIndex[0] == index ? '' : 'UnitemSelected']">
          <text>{{ item + showSuffix['year'] }}</text>
        </view>
      </picker-view-column>
      <!-- month -->
      <picker-view-column v-if="showCol.month">
        <view v-for="(item, index) in _col.month" :key="index" class="itemcel" :class="[colIndex[0] == index ? '' : 'UnitemSelected']">
          <text>{{ item +1 + showSuffix['month'] }}</text>
        </view>
      </picker-view-column>
      <!-- day -->
      <picker-view-column v-if="showCol.day">
        <view v-for="(item, index) in _col.date" :key="index" class="itemcel" :class="[colIndex[0] == index ? '' : 'UnitemSelected']">
          <text>{{ item + showSuffix['date'] }}</text>
        </view>
      </picker-view-column>
      <!-- hour -->
      <picker-view-column v-if="showCol.hour">
        <view v-for="(item, index) in _col.hour" :key="index" class="itemcel" :class="[colIndex[0] == index ? '' : 'UnitemSelected']">
          <text>{{ item + showSuffix['hour'] }}</text>
        </view>
      </picker-view-column>
      <!-- minute -->
      <picker-view-column v-if="showCol.minute">
        <view v-for="(item, index) in _col.minute" :key="index" class="itemcel" :class="[colIndex[0] == index ? '' : 'UnitemSelected']">
          <text>{{ item + showSuffix['minute'] }}</text>
        </view>
      </picker-view-column>
      <!-- second -->
      <picker-view-column v-if="showCol.second">
        <view v-for="(item, index) in _col.second" :key="index" class="itemcel" :class="[colIndex[0] == index ? '' : 'UnitemSelected']">
          <text>{{ item + showSuffix['second'] }}</text>
        </view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { propsOpts } from './props'
import { rangeTimeArray, checkNowDateisBetween, getNowbyIndex, getIndexNowbydate } from './time'
import dayjs from 'dayjs'
const emits = defineEmits(['update:modelValue', 'update:modelStr', 'change'])
const props = defineProps({ ...propsOpts })
const _nowtime = ref(dayjs(checkNowDateisBetween(props.defaultValue, props.start, props.end)))
const _nowtimeValue = computed(() => _nowtime.value.format())

const _startTime = computed(() => {
  return dayjs(props.start).isValid() ? dayjs(props.start).format() : dayjs().subtract(3, 'year').format()
})
const _endTime = computed(() => {
  return dayjs(props.end).isValid() ? dayjs(props.end).format() : dayjs().add(1, 'year').format()
})
const show = ref(true)
let colIndex = ref([0, 0, 0, 0, 0, 0])

const showCol = computed(() => {
  return {
    year: props.showDetail?.year ?? true,
    month: props.showDetail?.month ?? true,
    day: props.showDetail?.day ?? true,
    hour: props.showDetail?.hour ?? false,
    minute: props.showDetail?.minute ?? false,
    second: props.showDetail?.second ?? false
  }
})

const showSuffix = computed(() => {
  return {
    year: props.showSuffix?.year ?? '年',
    month: props.showSuffix?.month ?? '月',
    hour: props.showSuffix?.hour ?? '时',
    minute: props.showSuffix?.minute ?? '分',
    second: props.showSuffix?.second ?? '秒',
    date: props.showSuffix?.day ?? '日'
  }
})

const _col = ref({
  year: [],
  month: [],
  date: [],
  hour: [],
  minute: [],
  second: []
})

_col.value = rangeTimeArray(_nowtimeValue.value, _startTime.value, _endTime.value, showCol.value)

function colchange(e) {
  let changedate = getNowbyIndex(_col.value, e.detail.value, showCol.value)
  _col.value = rangeTimeArray(changedate, _startTime.value, _endTime.value, showCol.value)
  _nowtime.value = dayjs(changedate)
  nextTick(() => {
    colIndex.value = e.detail.value
    changedate = getNowbyIndex(_col.value, e.detail.value, showCol.value)
    _nowtime.value = dayjs(changedate)
    emits('update:modelValue', _nowtime.value.format('YYYY-MM-DD HH:mm:ss'))
    emits('update:modelStr', _nowtime.value.format(props.format))
    emits('change', _nowtime.value.format(props.format))
  })
}

watch(
  () => props.modelValue,
  () => {
    if (!dayjs(props.modelValue).isValid()) return
    let deattime = dayjs(checkNowDateisBetween(props.modelValue, props.start, props.end))
    if (dayjs(deattime).isSame(_nowtime.value)) return
    _nowtime.value = deattime
    emits('update:modelStr', _nowtime.value.format(props.format))
    _col.value = rangeTimeArray(deattime, _startTime.value, _endTime.value, showCol.value)
    // show.value = false
    colIndex.value = getIndexNowbydate(_col.value, _nowtime.value, showCol.value)
    // nextTick(() => {
    //   show.value = true
    // })
  }
)

// function nvuegetClientRect() {
//   nextTick(function() {
//   })
// }

onMounted(() => {
  // nvuegetClientRect();
  nextTick(() => {
    emits('update:modelValue', _nowtime.value.format('YYYY-MM-DD HH:mm:ss'))
    emits('update:modelStr', _nowtime.value.format(props.format))
    colIndex.value = getIndexNowbydate(_col.value, _nowtime.value, showCol.value)
  })
})
</script>

<style scoped lang="scss">
.su-time-view{
	// display: flex;
	position: relative;
}
.UnitemSelected {
	// background-image: rgba(0, 0, 0, 0);
}

.itemcel {
	justify-content: center;
	height: 50px;
	align-items: center;
	display: flex;
}
</style>
